<template>
  <div class="oneRoom" ref="oneRoom">
    <el-container>
        <el-header>
            <NavTenYear></NavTenYear>
        </el-header>
        <el-main>
            <el-aside>
                <div class="title">{{title}}</div>
            </el-aside>
            <el-main>
                <SmallBlock v-for="index in count" :key="index" :config="blockList[index-1]"  @click.native="goDetail(blockList[index-1].article_id);ClickAdd(blockList[index-1].article_id)" ></SmallBlock>
            </el-main>
        </el-main>
    </el-container>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';
export default {
    name: "oneRoom",
    data() {
        return {
            imgUrl: new Map([
                ['十年','1.jpg'],
                ['生死','2.jpg'],
                ['抉择','3.jpg'],
                ['铭刻','4.jpg'],
            ]),
            blockList:[],
            scrool:0,
            count:0,
            flag:true,
            page:1
        };
    },
    mounted(){
        this.$refs.oneRoom.style.backgroundImage = `url(/fourBlock/${this.imgUrl.get(this.title)})`
        window.addEventListener('scroll', this.Scrool)
        //获取文章列表
        this.$store.dispatch('base/reqArticleList',{one_source:this.title,page:this.page,sort:'desc'}).then((result)=>{
            this.blockList = [...this.blockList,...result.data.data]
            this.count+=result.data.data.length
        });
    },
    computed:{
        Scrool(){
            return ()=>{
                if(this.flag){
                    this.scrool = window.pageYOffset
                    let canScrool = document.body.clientHeight - document.documentElement.clientHeight
                    if(canScrool - this.scrool < 100){
                        this.flag = false
                        this.page++;
                        this.$store.dispatch('base/reqArticleList', {one_source:this.title,page:this.page,sort:'desc'}).then((result)=>{
                            this.blockList = [...this.blockList,...result.data.data]
                            this.count+=result.data.data.length
                            if(result.data.data.length == 5){
                                this.flag = true;
                            }
                        });
                    }
                }
            }
        }
    },
    props:['title'],
    methods:{
        //去详情页
        goDetail(id){
            this.$router.push({
                name:'Detail',
                query:{from:`${this.$route.path.substr(1)}`,id,fix:nanoid(5)},
            })
        },
        //点击量增加
        ClickAdd(id){
            this.$store.dispatch('base/reqClickAdd', id);
        }
    },
    watch: {
        title(newValue, oldValue) {
            this.$refs.oneRoom.style.backgroundImage = `url(/fourBlock/${this.imgUrl.get(this.title)})`
            this.blockList.length = 0
            this.count = 0
            this.page = 1
            this.flag = true
            this.$store.dispatch('base/reqArticleList',{one_source:this.title,page:this.page,sort:'desc'}).then((result)=>{
                this.blockList = [...this.blockList,...result.data.data]
                this.count+=result.data.data.length
            });
        },
    },
    beforeDestroy(){
      window.removeEventListener('scroll',this.Scrool);
    }
}
</script>

<style lang="less">
    .oneRoom{
        background-size: cover;
        min-height: 100vh;
        height: 100%;
        width: 100%;
        .el-header{
            padding: 0px;
        }
        .el-main{
            display: flex;
            .el-main{
                display: flex;
                flex-direction: column;
                padding: 0;
                .SmallBlock{
                    width: 95%;
                }
            }
        }
        .el-aside{
            width: 200px;
            height: 500px;
            display: flex;
            color: white;
            justify-content: center;
            align-items: center;
            .title{
                height: 200px;
                font-size: 100px;
                width: 100px;
                user-select: none;
            }
        }
    }
</style>